<template>
	<view class="main">
		<u-navbar
		title=" " 
		:is-back="false"
		title-size="34"
		:border-bottom="false"
		:background="background">
			<view class="header">
				<u-icon name="arrow-left" size="28" @tap="black"></u-icon>
				<view class="title">签约</view>
				<view class="ritbtn" @tap="cancel">预览</view>
			</view>
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="240" :label-style="label_style">
				<view class="title">
					<text>基本信息</text>
					<view class="ico"></view>
				</view>
				<view class="form-cont">
					<u-form-item label="开发者昵称" prop="intro">
						<u-input v-model="form.intro" placeholder="请设定" input-align="right"/>
						<u-icon name="arrow-right" color="#C7C7C7" size="28"></u-icon>
					</u-form-item>
					<u-form-item label="职业方向" prop="intro">
						<u-input v-model="form.intro" placeholder="请输入您岗位名称,如:UI设计师" input-align="right"/>
						<u-icon name="arrow-right" color="#C7C7C7" size="28"></u-icon>
					</u-form-item>
					<u-form-item label="所在城市" prop="intro">
						<u-input v-model="form.intro" placeholder="请设置您所在位置" input-align="right"/>
						<u-icon name="arrow-right" color="#C7C7C7" size="28"></u-icon>
					</u-form-item>
					<u-form-item label="接单价格" prop="intro">
						<u-input v-model="form.intro" placeholder="如:800元/日 18000/月 " input-align="right"/>
						<u-icon name="arrow-right" color="#C7C7C7" size="28"></u-icon>
					</u-form-item>
					<u-form-item label="接单时间" prop="intro">
						<u-input 
						@tap="timeShow=!timeShow"
						v-model="form.intro" 
						placeholder="请选择" 
						input-align="right"
						/>
						<u-icon name="arrow-right" color="#C7C7C7" size="28"></u-icon>
					</u-form-item>
					<u-form-item label="工作方式" prop="intro" :border-bottom="false">
						<u-input 
						@tap="jobWayShow=!jobWayShow"
						v-model="form.intro" 
						placeholder="请选择" 
						input-align="right"
						/>
						<u-icon name="arrow-right" color="#C7C7C7" size="28"></u-icon>
					</u-form-item>
				</view>
				<view class="title">
					<text>个人介绍</text>
					<view class="ico"></view>
				</view>
				<view class="form-cont">
					<u-form-item label="" prop="intro" :border-bottom="false">
						<u-input 
						@tap="toPage('/pages/SignUp/personalProfile')"
						v-model="form.intro" 
						type="textarea" 
						placeholder="请从个人基本情况/技术栈/可提供服务等方面进行介绍.字数不少于150字."/>
					</u-form-item>
				</view>
				<view class="title">
					<text>工作经历</text>
					<view class="ico"></view>
				</view>
				<view class="form-cont">
					<u-form-item label="" prop="intro" :border-bottom="false">
						<view class="item-cont">
							<view class="tips" @tap="toPage('/pages/SignUp/jobList')">请添加工作经历</view>
						</view>
					</u-form-item>
				</view>
				<view class="title">
					<text>教育经历</text>
					<view class="ico"></view>
				</view>
				<view class="form-cont">
					<u-form-item label="" prop="intro" :border-bottom="false">
						<view class="item-cont">
							<view class="tips">请添加教育经历</view>
						</view>
					</u-form-item>
				</view>
				<view class="title">
					<text>技能</text>
					<view class="ico"></view>
				</view>
				<view class="form-cont">
					<u-form-item label="" prop="intro" :border-bottom="false">
						<view class="item-cont">
							<view class="tips">请添加至少一项技能</view>
						</view>
					</u-form-item>
				</view>
				<view class="title">
					<text>作品</text>
					<view class="ico"></view>
				</view>
				<view class="form-cont">
					<u-form-item label="" prop="intro" :border-bottom="false">
						<view class="item-cont">
							<view class="tips" @tap="toPage('/pages/SignUp/worksList')">申请签约至少需要添加3个不同的具有代表性的个人项目</view>
						</view>
					</u-form-item>
				</view>
				<view class="title">
					<text>社区影响力</text>
					<view class="ico"></view>
				</view>
				<view class="form-cont">
					<u-form-item label="" prop="intro" :border-bottom="false">
						<view class="item-cont">
							<view class="tips">请从个人基本情况/技术栈/可提供服务等方面进行介绍.字数不少于150字.</view>
						</view>
					</u-form-item>
				</view>
				<u-gap height="30" bg-color="#f9f9f9"></u-gap>
				<view class="form-cont">
					<u-form-item label="实名认证" prop="intro" :border-bottom="false">
						<u-input v-model="form.intro" placeholder="未认证" input-align="right"/>
						<u-icon name="arrow-right" color="#C7C7C7" size="28"></u-icon>
					</u-form-item>
				</view>
			</u-form>
			<button class="submit" @click="submit">确认提交</button>
		</view>
		<!-- 弹窗 -->
		<u-popup v-model="show" mode="center" border-radius="8" closeable>
			<view class="sign-up">
				<view class="title">签约开发者</view>
				<view class="des">
					在灵活用工平台，只有签约开发者才能接受平台指派
					项目进行工作，或通过短期雇佣接受企业预约工作获
					得报酬。
				</view>
				<view class="des">
					灵活用工平台会严格保证开发者质量、态度,不断让优
					质开发者突出受益，不断淘汰低水平开发者。
				</view>
				<view class="pact">
					<u-checkbox v-model="form.pact" size="24" label-size="24" shape="circle">我已阅读并同意 </u-checkbox>
					<text>《用户协议》</text>
					<text>《隐私政策》</text>
				</view>
				<button type="default" class="yes">完善简历并申请签约</button>
			</view>
		</u-popup>
		<!-- 工作方式 -->
		<u-select 
		title="工作方式"
		v-model="jobWayShow" 
		:list="jobWayList" 
		mode="mutil-column-auto"
		@confirm="confirmJobWay"></u-select>
		<!-- 接单时间弹窗 -->
		<u-picker :params="params" v-model="timeShow" mode="time"></u-picker>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				background: {
					backgroundColor:"#4A90E2"
				},
				show:true,//是否显示完善简历弹窗
				jobWayShow:false,//是否展示职位要求弹窗
				timeShow:false,//是否展示接单时间弹窗
				label_style:{
					fontSize: '28rpx',
					color: '#333333',
					lineHeight: '40px'
				},
				form: {
					name: '',
					intro: '',
					pact:false,
				},
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					intro: [
						{
							min: 5, 
							message: '简介不能少于5个字', 
							trigger: 'change'
						}
					]
				},
				//工作方式列表
				jobWayList: [
					{
						value: 1,
						label: '远程',
						children: [
							{
								value: 2,
								label: '10小时'
							},
							{
								value: 3,
								label: '8小时'
										
							}
						],
					},
					{
						value: 4,
						label: '计时',
						children: [
							{
								value: 5,
								label: '1小时'
							},
							{
								value: 6,
								label: '2小时'
										
							}
						],
					},
				],
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onPullDownRefresh() {
		    console.log('refresh');
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		methods: {
			//确定工作方式
			confirmJobWay(e){
				console.log('[工作方式]',e);
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			// 取消
			cancel(){
				
			},
			//返回
			black(){
				uni.navigateBack()
			},
			toPage(url,islogin=false){
				this.more_show = false
				if(islogin){
					uni.navigateTo({
					    url: '/pages/Login/index'
					});
					return
				}
				uni.navigateTo({
				    url: url
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		padding:0 30rpx;
		background-color: #f9f9f9;
		.header{
			padding: 0 30rpx;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #FFFFFF;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 34rpx;
			.title{
				font-size: 34rpx;
			}
			.ritbtn{
				font-size: 28rpx;
				position: relative;
				z-index: 999999;
			}
		}
		.content{
			overflow: hidden;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 20rpx;
				text{
					font-size: 30rpx;
					font-weight: 500;
					color: #4A90E2;
					line-height: 42rpx;
				}
				.ico{
					width: 30rpx;
					height: 26rpx;
				}
			}
			.form-cont{
				padding: 0 20rpx;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				/deep/.u-input__textarea{
					height: 292rpx!important;
				}
				.item-cont{
					background-color: #FFFFFF;
					border-radius: 8rpx;
					padding: 10rpx 0;
					.tips{
						font-size: 28rpx;
						color: #C7C7C7;
						line-height: 40rpx;
					}
				}
			}
			.submit{
				height: 100rpx;
				background: #4A90E2;
				border-radius: 50rpx;
				font-size: 34rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 100rpx;
				margin: 30rpx 0;
				&::after{
					border: 0;
				}
			}
		}
		.sign-up{
			width: calc(100vw - 60rpx);
			padding: 85rpx 20rpx 60rpx 20rpx;
			.title{
				font-size: 30rpx;
				font-weight: 500;
				color: #4A90E2;
				line-height: 42rpx;
				text-align: center;
			}
			.des{
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				margin-top: 30rpx;
			}
			.pact{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #888888;
				line-height: 33rpx;
				margin: 114rpx 64rpx 0 64rpx;
				text{
					color: #4A90E2;
				}
			}
			.yes{
				width:calc(100% - 128rpx);
				height: 100rpx;
				background: #4A90E2;
				border-radius: 50rpx;
				font-size: 34rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 100rpx;
				margin-top: 30rpx;
				&::after{
					border: 0;
				}
			}
		}
	}
</style>
